.tools__button {
	border: 1px solid transparent;
	box-sizing: border-box;
	align-items: center;
	border-radius: 50%;
	color: #303133;
	cursor: pointer;
	display: flex;
	justify-content: center;
	height: 40px;
	margin: 2px;
	outline: 0;
	transition: all 0.2s ease-in-out;
	width: 40px;

	&:hover {
		background-color: #f5f7fa;
	}
}

.tool--active {
	background-color: #ecf5ff;
	color: #409eff;
}

.editor {
	&--fullscreen {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
	}

	&-tools {
		background-color: #fff;
		border: 1px solid #ebeef5;
		border-bottom: 0;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		display: flex;
		flex-shrink: 0;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 5px 10px;
		position: relative;

		&::before {
			bottom: 0;
			background-color: #ebeef5;
			content: "";
			height: 1px;
			left: 0;
			margin: 0 10px;
			right: 0;
			position: absolute;
		}
	}

	&-code {
		user-select: none;
		background-color: #fff;
		border: 1px solid #ebeef5;
		border-top: 0;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		color: #000;
		flex-grow: 1;
		padding: 20px;
		box-sizing: border-box;
		font-family: sans-serif;
		line-height: 1.7;
		overflow-x: auto;
	}

	.tiptap {
		> * + * {
			margin-top: 0.75em;
		}
		ul,
		ol {
			counter-reset: none;
			list-style-type: none;
			margin-bottom: 0;
			margin-left: 24px;
			margin-top: 0;
			padding-bottom: 5px;
			padding-left: 0;
			padding-top: 5px;
		}

		li > p {
			margin: 0;

			&:first-child::before {
				content: counter(tiptap-counter) ".";
				display: inline-block;
				left: -5px;
				line-height: 1;
				margin-left: -24px;
				position: relative;
				text-align: right;
				top: 0;
				width: 24px;
			}
		}

		ul li > p {
			&:first-child::before {
				content: "\2022";
				text-align: center;
			}
		}

		ol {
			counter-reset: tiptap-counter;

			li > p:first-child::before {
				counter-increment: tiptap-counter;
			}
		}
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			line-height: 1.1;
		}

		h1 {
			font-size: 26px;
		}
		h2 {
			font-size: 24px;
		}
		h3 {
			font-size: 22px;
		}
		h4 {
			font-size: 20px;
		}
		h5 {
			font-size: 18px;
		}

		pre {
			color: #fff;
			font-family: "JetBrainsMono", monospace;
			.hljs-comment,
			.hljs-quote {
				color: #616161;
			}
			code {
				background-color: rgba(#616161, 0.1);
			}
			.hljs-variable,
			.hljs-template-variable,
			.hljs-attribute,
			.hljs-tag,
			.hljs-name,
			.hljs-regexp,
			.hljs-link,
			.hljs-name,
			.hljs-selector-id,
			.hljs-selector-class {
				color: #f98181;
			}

			.hljs-number,
			.hljs-meta,
			.hljs-built_in,
			.hljs-builtin-name,
			.hljs-literal,
			.hljs-type,
			.hljs-params {
				color: #fbbc88;
			}

			.hljs-string,
			.hljs-symbol,
			.hljs-bullet {
				color: #b9f18d;
			}

			.hljs-title,
			.hljs-section {
				color: #faf594;
			}

			.hljs-keyword,
			.hljs-selector-tag {
				color: #70cff8;
			}

			.hljs-emphasis {
				font-style: italic;
			}

			.hljs-strong {
				font-weight: 700;
			}
		}

		p {
			margin-bottom: 0;
			margin-top: 0;
			outline: none;
		}
		img {
			max-width: 100%;
			height: auto;
		}

		blockquote {
			padding-left: 16px;
			border-left: 4px solid rgba(#ecf5ff, 0.81);
			border-radius: 2px;
			margin: 10px 0;
		}

		hr {
			border: none;
			border-top: 1px solid rgba(#0d0d0d, 0.1);
			margin: 2rem 0;
		}

		a {
			color: #68cef8;
			text-decoration: underline;
		}
		table {
			border-collapse: collapse;
			table-layout: fixed;
			width: 100%;
			margin: 0;
			overflow: hidden;

			td,
			th {
				min-width: 1em;
				border: 1px solid #f0f0f0;
				padding: 10px;
				vertical-align: top;
				box-sizing: border-box;
				position: relative;
				> * {
					margin-bottom: 0;
				}
			}

			th {
				font-weight: bold;
				text-align: left;
				background-color: #fafafa;
			}

			.selectedCell:after {
				z-index: 2;
				position: absolute;
				content: "";
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background: #ecf5ff;
				border: 1px solid #eee;
				pointer-events: none;
			}

			.column-resize-handle {
				position: absolute;
				right: -2px;
				top: 0;
				bottom: -2px;
				width: 4px;
				background-color: #adf;
				pointer-events: none;
			}

			p {
				margin: 0;
			}
		}

		@for $i from 1 through 7 {
			$indent-margin-base: 30px;

			*[data-indent="#{$i}"] {
				margin-left: $indent-margin-base * $i !important;
			}
		}

		.image-view {
			$root: &;

			display: inline-block;
			float: none;
			line-height: 0;
			margin: 12px 0;
			max-width: 100%;
			user-select: none;
			vertical-align: baseline;

			&--inline {
				margin-left: 12px;
				margin-right: 12px;
			}

			&--block {
				display: block;
			}

			&--left {
				float: left;
				margin-left: 0;
				margin-right: 12px;
			}

			&--right {
				float: right;
				margin-left: 12px;
				margin-right: 0;
			}

			&__body {
				clear: both;
				display: inline-block;
				max-width: 100%;
				outline-color: transparent;
				outline-style: solid;
				outline-width: 2px;
				transition: all 0.2s ease-in;
				position: relative;

				&:hover {
					outline-color: #ffc83d;
				}

				&--focused:hover,
				&--resizing:hover {
					outline-color: transparent;
				}

				&__placeholder {
					height: 100%;
					left: 0;
					position: absolute;
					top: 0;
					width: 100%;
					z-index: -1;
				}

				&__image {
					cursor: pointer;
					margin: 0;
				}
			}
		}
	}

	.tableWrapper {
		overflow-x: auto;
	}

	.resize-cursor {
		cursor: ew-resize;
		cursor: col-resize;
	}
}
